﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>入职培训</title>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/assets/css/elementui.css">
    <link rel="stylesheet" href="css/apply.css">
    <style>
        .el-row .el-form-item {
            margin-bottom: 0px;
            text-align: center;
            border-right: 1px solid black;
        }

        .el-row {
            border: 1px solid black;
            margin-bottom: -1px !important;
        }

        .title {
            text-align: center;
            font-weight: bold;
            font-size: 20px;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div id="app">
    <div id="fm">
        <el-form>
            <el-row>
                <el-col :span="24" class="title">员工入职领用单</el-col>
            </el-row>
            <el-row>
                <el-col :span="4">
                    <el-form-item>姓名</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-input v-model="currentRow.userName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item>部门</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-input v-model="currentRow.department"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>

            </el-row>
        </el-form>
        <el-table
                :data="tableData"
                border
                style="margin-top: 1em;">
            <el-table-column
                    prop="stepId"
                    label="步骤"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="orgname"
                    label="组织"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="nickName"
                    label="姓名"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="80">
                <template slot-scope="scope">
                    <span>{{handleStatus(scope.row)}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="action"
                    label="操作"
                    width="200">
                <template slot-scope="scope">
                    <el-button v-if="(getUserId()==scope.row.person)&&(scope.row.status==2)" type="primary" size="mini"
                               @click="handleAction(scope.row)">审核
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="审批时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="comment"
                    label="备注"
                    width="200">
            </el-table-column>
        </el-table>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="40%">
            <el-form>
                <el-form-item label="内容">
                    <el-select v-model="currentSelect">
                        <el-option
                                v-for="(item,i) in listInfo"
                                :key="i"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSave">提交</el-button>
            </span>
        </el-dialog>
    </div>
</div>
<script type="text/javascript" src="/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="/assets/module/layer/layer.js"></script>
<script type="text/javascript" src="/assets/js/common.js?v=317"></script>
<script type="text/javascript" src="/assets/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/assets/js/js.cookie.min.js"></script>
<script type="text/javascript" src="/assets/js/sqjx.js"></script>
<script type="text/javascript" src="/assets/js/custom.js"></script>
<script src="/assets/js/vue.min.js"></script>
<script src="/assets/js/elementui.js"></script>
<script type="text/javascript" src="js/design.js"></script>
<script type="text/javascript" src="js/multiSelect.js"></script>
<script>
    let that;
    new Vue({
        el: '#app',
        data: function () {
            return {
                dialogVisible: false,
                currentSelect: '',
                underSignAccount: '',
                currentRow: {},
                orgList: [],
                tableData: [],
                instancedId: '',
                listInfo: [
                    {label: '劳保用品', value: '劳保用品'},
                    {label: '门禁卡', value: '门禁卡'},
                    {label: '押金', value: '押金-300'},
                    {label: '安全培训', value: '安全培训'}
                ]
            }
        },
        mounted: function () {
            that = this
            this.instanceId = getUrlParam();
            this.getInstanceProcess();
        },
        methods: {
            handleStatus(row) {
                switch (row.status) {
                    case 1:
                        return row.makeFlag == 2 ? '已执行' : '同意';
                    case 2:
                        return row.makeFlag == 2 ? '待执行' : '待审核';
                    case 0:
                        return '不同意';
                    case 3 :
                        return row.makeFlag == 2 ? '待执行' : '待审核';
                    case -1:
                        return '待审核'
                }
                return '未知参数'
            },

            handleAction(row) {
                this.dialogVisible = true;
                this.getListInfo();
            },
            handleSave() {
                if(!this.currentSelect){
                   this.$message.warning('请选择审批类型')
                    return
                }
               //1.审批流程
                var flowParam={person:getUserId(),instanceId:this.instanceId,status:1,comment: this.currentSelect};
                var params = {type: this.currentSelect, underSignAccount: this.underSignAccount}
                $.post('/office/flowStepApprove/approve',flowParam,function(res) {
                    //2.提交审批内容
                    $.post('/office/hrUserList/addHrUserList', params, function (res) {
                        that.dialogVisible = false;
                        if (res.code == 200) {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index)
                        }

                    })
                })

            },
            getInstanceProcess() {
                $.post('/office/flowStepInstance/queryInstanceAndProcess', {instanceId: this.instanceId}, function (res) {
                    that.tableData = res.obj.flowStepApprove.process
                    $.post('/office/flowStepInstance/queryDetail', {id: that.instanceId}, function (res) {
                        that.currentRow = res.obj
                        if (res.code == 200) {
                            that.underSignAccount = res.obj.annex
                        }
                    })
                })
            },
            getListInfo() {
                let param = {};
                param.page = 1
                param.rows = 500;
                param.underSignAccount = that.underSignAccount;
                $.get('/office/hrUserList/queryHrUserListList', param).then(res => {
                    let typeList = res.obj.rows;
                    typeList.map(each => {
                        let x = each.type;
                        that.listInfo = that.listInfo.filter(item => {
                            if (item.value == x) {

                            }else{
                                return item
                            }
                        })
                    })
                })
            },
        },

    })
</script>
</body>
</html>
